<template>
  <div>
    <WPage v-model:searchForm="form" :searchFormItems="fornItems" :tableCols="tableCols" :tableDataApi="api">
      <template #cs="{ form }">我是插槽的测试{{ form }}</template>

      <template #TableLeftTop>
        <el-button type="primary">左上</el-button>
      </template>

      <template #TableRightTop>
        <el-button type="primary">右上</el-button>
      </template>
    </WPage>
  </div>
</template>

<script setup lang="ts">
import type { WFormItemsConfig, WTableCol } from '@/types/WLib'

const form = ref({})

const fornItems: WFormItemsConfig[] = [
  {
    type: 'input',
    name: 'name',
    label: '姓名',
  },
  {
    type: 'input',
    name: 'age',
    label: '年龄',
  },
  {
    type: 'input',
    name: 'age1',
    label: '年龄1',
  },
  {
    type: 'input',

    name: 'age2',
    label: '年龄2',
  },
  {
    type: 'input',
    name: 'age3',
    label: '年龄3',
  },
  {
    type: 'select',
    name: 'age4',
    label: '年龄4',
    props: {
      option: [
        {
          label: '选项1',
          value: '1',
        },
        {
          label: '选项2',
          value: '2',
        },
        {
          label: '选项3',
          value: '3',
        },
      ],
    },
  },
  {
    type: 'slot',
    name: 'cs',
  },
]

const tableCols: WTableCol[] = [
  {
    prop: 'data',
    label: '数据',
    width: 100,
  },
  {
    prop: 'name',
    label: '名字',
    width: 100,
    formatter(_row, _column, cellValue, _index) {
      return h('div', { style: { color: 'red' } }, cellValue)
    },
  },
  {
    prop: 'address',
    label: '地址',
  },
]

const api = (params: any) => {
  console.log(params)
  const data = [
    {
      data: '1',
      name: '张三',
      address: '上海市普陀区金沙江路 1518 弄',
    },
    {
      data: '2',
      name: '李四',
      address: '上海市普陀区金沙江路 1517 弄',
    },
    {
      data: '3',
      name: '王五',
      address: '上海市普陀区金沙江路 1519 弄',
    },
    {
      data: '4',
      name: '赵六',
      address: '上海市普陀区金沙江路 1516 弄',
    },
  ]

  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ data })
    }, 1000)
  })
}
</script>

<style lang="scss" scoped></style>
